'use client'

import { useState } from "react"
import { ArrowUturnLeftIcon } from "@heroicons/react/24/outline"
import { CreateReturnDialog } from "./create-return-dialog"
import { SerializedSale } from '@/types'

interface ReturnItemProps {
  sale: SerializedSale
  returnedItems: Record<number, number>
}

export function ReturnItem({ sale, returnedItems = {} }: ReturnItemProps) {
  const [isReturnOpen, setIsReturnOpen] = useState(false)

  // 计算可退货数量
  const canReturn = sale.items.some(item => {
    const returnedQuantity = returnedItems[item.saleItemId] || 0
    const remainingQuantity = item.quantity - returnedQuantity
    return remainingQuantity > 0
  })

  // 计算退货状态
  const getReturnStatus = () => {
    let totalQuantity = 0
    let totalReturnedQuantity = 0

    sale.items.forEach(item => {
      totalQuantity += item.quantity
      totalReturnedQuantity += returnedItems[item.saleItemId] || 0
    })

    if (totalReturnedQuantity === 0) return '未退货'
    if (totalReturnedQuantity === totalQuantity) return '已全部退货'
    return '部分退货'
  }

  // 计算退货数量信息
  const getReturnInfo = () => {
    const info = sale.items.map(item => {
      const returnedQuantity = returnedItems[item.saleItemId] || 0
      const remainingQuantity = item.quantity - returnedQuantity
      return `${item.product.name}: 已退${returnedQuantity}/${item.quantity}`
    }).join(', ')
    return info || '无退货记录'
  }

  return (
    <tr className="hover:bg-gray-50">
      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
        {sale.code}
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
        ¥{parseFloat(sale.totalAmount).toFixed(2)}
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
        {new Date(sale.createdAt).toLocaleString()}
      </td>
      <td className="px-6 py-4 whitespace-nowrap">
        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
          getReturnStatus() === '已全部退货' ? 'bg-gray-100 text-gray-800' :
          getReturnStatus() === '部分退货' ? 'bg-yellow-100 text-yellow-800' :
          'bg-green-100 text-green-800'
        }`}>
          {getReturnStatus()}
        </span>
        <div className="text-xs text-gray-500 mt-1">
          {getReturnInfo()}
        </div>
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
        {canReturn && (
          <button
            onClick={() => setIsReturnOpen(true)}
            className="text-blue-600 hover:text-blue-900"
          >
            <ArrowUturnLeftIcon className="h-5 w-5" />
          </button>
        )}
        {isReturnOpen && (
          <CreateReturnDialog
            sale={sale}
            returnedItems={returnedItems}
            open={isReturnOpen}
            onClose={() => setIsReturnOpen(false)}
          />
        )}
      </td>
    </tr>
  )
} 